React native support #23

aidenybai · 2024-11-21T02:40:25Z

Hi! We're ready to show you an early preview of React Scan for Native. It's not 100% feature parity with web yet, and a lot of technical decisions are up for change, but we'd love for you to try it out.

Please leave all React Native bugs/feedback within this PR until it is merged.

SimulatorScreenRecording-iPhone16-2024-11-27at16.25.23-ezgif.com-crop-video.mp4

Setup guide

First, install the required dependencies:

npm install @shopify/react-native-skia@^1.5.10 react-native-reanimated react-scan@native

Then, wrap your root component with ReactScan:

import { ReactScan } from 'react-scan/native';

// For Expo, in _layout.tsx:
export default function Layout() {
  return (
    <ReactScan
        options={{
           enabled: true,
           log: true,
           animationWhenFlashing: false,
        }}
     >
      <Stack>{/* Your app content */}</Stack>
    </ReactScan>
  );
}

// For vanilla React Native, wrap your root component similarly

The React Native version supports most of the options described in the API Reference section below, with a few differences:

Not Available: playSound, runInProduction, includeChildren, onPaintFinish, and onPaintStart

Additional Options:

{
  /**
   * Controls the animation of the re-render overlay.
   * When set to "fade-out", the overlay will fade out after appearing.
   * When false, no animation will be applied.
   * Note: Enabling animations may impact performance.
   * @default false
   */
  animationWhenFlashing?: 'fade-out' | false;
}

Example usage with options:

<ReactScan
  options={{
    enabled: true,
    log: true,
    animationWhenFlashing: 'fade-out',
  }}
>
  {/* Your app content */}
</ReactScan>

Important

By default, Metro bundler includes React Scan in production builds, which can add up to 6MB to your bundle size. To prevent this, use our babel plugin:

If you are not using expo, install expo-babel-preset (works outside of expo):
npm install babel-preset-expo
Create or modify your babel.config.js:

const { withReactScanTreeShake } = require('react-scan/babel');
module.exports = withReactScanTreeShake({
  // Your existing babel options go here
});

This will automatically remove React Scan from production builds while keeping it available during development.

Contributing

Please leave all React Native bugs/feedback within this PR until it is merged.

To setup:

git clone https://github.com/aidenybai/react-scan.git
cd react-scan
git checkout react-native

You'll need to create a React Native test repo to get it spun up

vercel · 2024-11-21T02:40:28Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-scan	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2024 6:30pm

izakfilmalter · 2024-11-25T19:13:47Z

RobPruzan · 2024-11-25T23:06:18Z

Coming soon, we put this on the back burner in favor of https://x.com/aidenybai/status/1861079416480383159, but we're hoping to ship this soon!

Only todo is to make sure we don't bloat your production bundle with 6mb of react-native-skia (probably requires a metro plugin)

slorber · 2024-11-27T10:12:49Z

For my curious readers 😇 here's what it should look like:

https://x.com/aidenybai/status/1861612714537427045

ssstwitter.com_1732702337955.mp4

tanjwGit · 2024-12-13T09:19:09Z

hi boss, Can I not use react-native-reanimated?

I think maybe many people are like us and cannot use react-native-reanimated for some reason

RobPruzan · 2024-12-13T14:36:37Z

hi boss, Can I not use react-native-reanimated?

I think maybe many people are like us and cannot use react-native-reanimated for some reason

Currently its required, but most likely in the next release for react-scan@native we will drop this requirement

ice-cap0 · 2024-12-26T19:09:41Z

any dice?

Acetyld · 2024-12-30T13:43:10Z

Alright we tried this as well.
Walked into to many rerenders, setting renderCountThreshold to 20 fixes it but holy its so slow.
A flash list, it does like each item every 2 seconds, its like every 0.2 seconds i checks 1 child.
The whole app freezes.

So above comments confirm our case, non the less great work guys!

arthur-fontaine · 2025-01-02T10:36:33Z

It is not compatible with React Native Web due to use of matchFont (here), which is not implemented on web.

One of Skia's contributor recommended to use the Paragraph API instead Shopify/react-native-skia#2303 (comment).

RobPruzan · 2025-01-07T04:04:58Z

any dice?

All fixes will come with when @react-native lands on main

taking longer than I hoped to upstream the fixes because I'm working on some react-scan@web features that have taken priority

sant3001 · 2025-01-13T14:22:59Z

Same here... I'm getting that "Maximum call stack size exceeded" error:

KMJ-007 · 2025-01-20T20:43:17Z

would love to try and get this PR merge as fast as possible

shmkane · 2025-01-23T02:44:02Z

Just commenting here to indicate my interest in the RN version as lots of others have already expressed :)

a-eid · 2025-01-24T02:04:17Z

doesn't seem to be working with RNW

dhruvpvx · 2025-01-24T10:48:45Z

is it possible to use it without skia?

sant3001 · 2025-01-29T21:21:28Z

is it possible to use it without skia?

Yeah that'd be nice. I don't really want to install skia because we're using different libraries. Would be nice to have a standard solution that works without external dependencies like that.

Ammar1999y · 2025-03-04T23:56:41Z

why it doesn't support android?!

Choco-milk-for-u · 2025-03-08T00:55:42Z

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?

deepanshushukla · 2025-03-09T11:34:32Z

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?
Facing same issue

Ammar-1999 · 2025-03-10T04:12:41Z

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?

are you using Android?

deepanshushukla · 2025-03-10T07:51:39Z

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?

are you using Android?

Yes

Ammar1999y · 2025-03-15T10:44:59Z

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?

are you using Android?

Yes

It's not working on Android

Choco-milk-for-u · 2025-03-16T11:48:19Z

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?

are you using Android?

Yes

It's not working on Android

is there any way to know the progress? When would it be possible to use for android.

Derewith · 2025-04-07T13:05:16Z

Any updates?

RobPruzan · 2025-04-13T10:32:17Z

Any updates?

Okay good news. I finally figured out how to make react scan work for react native. i was worried it wasn't possible, but the approach I came up with should allow for full parity with web.

This will take a bit to cook, but it's coming :)

Choco-milk-for-u · 2025-04-13T17:54:00Z

Any updates?

Okay good news. I finally figured out how to make react scan work for react native. i was worried it wasn't possible, but the approach I came up with should allow for full parity with web.

This will take a bit to cook, but it's coming :)

🔥 🔥 🔥 🔥 i honestly thought i would never see that in any time soon 😭

RobPruzan · 2025-04-27T02:06:08Z

Any updates?? I've been waiting for this since months now

The changes are quite significant, so will need some patience. Will share updates as they come

josanjohnata · 2025-06-25T12:49:52Z

Any updates?? I've been waiting for this since months now

The changes are quite significant, so will need some patience. Will share updates as they come

No update yet? 😢

RobPruzan · 2025-06-29T21:28:27Z

Any updates?? I've been waiting for this since months now

The changes are quite significant, so will need some patience. Will share updates as they come

No update yet? 😢

Current priorities are:

v1.0 (lots of bug fixes)
MCP server for react scan

after those I'll pick up the react native effort again

Rag0n · 2025-09-21T19:54:52Z

Hey @RobPruzan, do you have any update on react-native support or plans?

rdmclin2 · 2025-09-24T10:50:08Z

Does react native version support react19 ?

malekelkssas · 2025-10-02T06:53:12Z

I'm getting a Babel plugin conflict when trying to add react-scan to React Native:

SyntaxError: node_modules/react-native/src/private/specs/components/RCTInputAccessoryViewNativeComponent.js: NodePath has been removed so is read-only.
    at File.buildCodeFrameError (node_modules/@babel/core/lib/transformation/file/file.js:202:12)
    at NodePath.buildCodeFrameError (node_modules/@babel/traverse/lib/path/index.js:117:21)
    at NodePath._assertUnremoved (node_modules/@babel/traverse/lib/path/removal.js:65:16)
    at NodePath.insertAfter (node_modules/@babel/traverse/lib/path/modification.js:102:29)
    at NodePath.replaceWithMultiple (node_modules/@babel/traverse/lib/path/replacement.js:58:22)
    at PluginPass.exit (node_modules/@react-native/babel-plugin-codegen/index.js:171:32)
    ...

Environment:

React Native: 0.74.5
React: 18.2.0

Setup:
Using withReactScanTreeShake wrapper as documented in PR #23:

const { withReactScanTreeShake } = require('react-scan/babel');

module.exports = withReactScanTreeShake({
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    // ... other plugins
    'react-native-reanimated/plugin',
  ],
});

The error occurs during the build process. It seems there's a conflict between @react-native/babel-plugin-codegen and react-scan's babel transformation when processing React Native's internal spec files.

Has anyone successfully integrated react-scan with React Native 0.74.x?

vercel bot deployed to Preview November 21, 2024 07:06 View deployment

vercel bot deployed to Preview November 21, 2024 07:07 View deployment

RobPruzan force-pushed the react-native branch from 3bcd0af to 1944fac Compare November 21, 2024 07:08

vercel bot deployed to Preview November 21, 2024 07:08 View deployment

RobPruzan force-pushed the react-native branch from 588c040 to 0932061 Compare November 21, 2024 07:09

vercel bot deployed to Preview November 21, 2024 07:10 View deployment

RobPruzan force-pushed the react-native branch from 0932061 to acc5032 Compare November 21, 2024 07:10

vercel bot deployed to Preview November 21, 2024 07:11 View deployment

vercel bot deployed to Preview November 22, 2024 02:18 View deployment

RobPruzan force-pushed the main branch 5 times, most recently from a0ff4b3 to 50ca57b Compare November 25, 2024 09:00

vercel bot had a problem deploying to Preview November 27, 2024 03:03 Failure

vercel bot deployed to Preview November 27, 2024 03:13 View deployment

vercel bot deployed to Preview November 27, 2024 03:14 View deployment

vercel bot deployed to Preview November 27, 2024 03:33 View deployment

vercel bot deployed to Preview November 27, 2024 04:37 View deployment

RobPruzan force-pushed the react-native branch from b765799 to 99fb610 Compare November 27, 2024 04:40

vercel bot deployed to Preview November 27, 2024 04:41 View deployment

RobPruzan force-pushed the react-native branch from 99fb610 to 6fad4f6 Compare November 27, 2024 04:41

vercel bot deployed to Preview November 27, 2024 04:42 View deployment

vercel bot deployed to Preview November 27, 2024 05:28 View deployment

RobPruzan force-pushed the react-native branch from 45ef773 to b0e2dad Compare November 27, 2024 11:52

vercel bot deployed to Preview November 27, 2024 11:53 View deployment

RobPruzan force-pushed the main branch 2 times, most recently from 7526d13 to 47c46ca Compare December 21, 2024 01:52

React native support #23

Are you sure you want to change the base?

React native support #23

Conversation

aidenybai commented Nov 21, 2024 • edited by RobPruzan Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Setup guide

Contributing

Uh oh!

vercel bot commented Nov 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

izakfilmalter commented Nov 25, 2024

Uh oh!

RobPruzan commented Nov 25, 2024

Uh oh!

slorber commented Nov 27, 2024

Uh oh!

tanjwGit commented Dec 13, 2024

Uh oh!

RobPruzan commented Dec 13, 2024

Uh oh!

ice-cap0 commented Dec 26, 2024

Uh oh!

Acetyld commented Dec 30, 2024

Uh oh!

arthur-fontaine commented Jan 2, 2025

Uh oh!

RobPruzan commented Jan 7, 2025

Uh oh!

sant3001 commented Jan 13, 2025

Uh oh!

KMJ-007 commented Jan 20, 2025

Uh oh!

shmkane commented Jan 23, 2025

Uh oh!

a-eid commented Jan 24, 2025

Uh oh!

dhruvpvx commented Jan 24, 2025

Uh oh!

sant3001 commented Jan 29, 2025

Uh oh!

Ammar1999y commented Mar 4, 2025

Uh oh!

Choco-milk-for-u commented Mar 8, 2025

Uh oh!

deepanshushukla commented Mar 9, 2025

Uh oh!

Ammar-1999 commented Mar 10, 2025

Uh oh!

deepanshushukla commented Mar 10, 2025

Uh oh!

Ammar1999y commented Mar 15, 2025

Uh oh!

Choco-milk-for-u commented Mar 16, 2025

Uh oh!

Derewith commented Apr 7, 2025

Uh oh!

RobPruzan commented Apr 13, 2025

Uh oh!

Choco-milk-for-u commented Apr 13, 2025

Uh oh!

RobPruzan commented Apr 27, 2025

Uh oh!

josanjohnata commented Jun 25, 2025

Uh oh!

RobPruzan commented Jun 29, 2025

Uh oh!

Rag0n commented Sep 21, 2025

Uh oh!

rdmclin2 commented Sep 24, 2025

Uh oh!

malekelkssas commented Oct 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

aidenybai commented Nov 21, 2024 •

edited by RobPruzan

Loading

vercel bot commented Nov 21, 2024 •

edited

Loading